<template name="page-head">
	<view class="">
		<view class="cu-custom" :style="[{height:navHeight + 'px'}]">
			<div class="head-bar fiexd" :style="{height: navHeight + 'px',paddingBottom:navHeight-btnBottom+'px' ,background: bColor,color: fColor}">
				<div v-if="icon!='none'" class="home" @click="jump" :style="{height: btnHeight + 'px',width: btnHeight + 'px', borderRadius: btnHeight/2 + 'px'}">
					<view class="iconfont" :class="icon"></view>
				</div>
				<div class="home" :style="{height: btnHeight + 'px',width: btnHeight + 'px', borderRadius: btnHeight/2 + 'px'}">
					<slot name="icon"></slot>
				</div>
				<div class="title" :class="{'android-title':platform=='android' && checkPlatform=='true'}" :style="{height: btnHeight + 'px', lineHeight: btnHeight + 'px', fontSize: fontSize + 'rpx'}">{{title}}</div>
			</div>
		</view>
	</view>
</template>
<script>
	export default {
		name: "page-head",
		props: {
			fontSize: {
				type: Number,
				default: 36
			},
			title: {
				type: String,
				default: ""
			},
			icon: {
				type: String,
				default: "icon-back"
			},
			bColor: {
				type: String,
				default: 'transparent'
			},
			url: {
				type: String,
				default: ""
			},
			fColor: {
				type: String,
				default: '#ffffff'
			},
			checkPlatform: {
				type: String,
				default: 'true'
			}
		},
		data() {
			return {
				navHeight: this.CustomBar,
				btnHeight: this.Custom.height,
				btnBottom: this.Custom.bottom,
				platform: this.ThePlatform
			}
		},
		mounted() {
		},
		methods: {
			jump() {
				if(this.url) {
					if(this.url=='/pages/index/index'){
						uni.switchTab({
							url: this.url
						})
					}else{
						uni.redirectTo({
							url: this.url
						})
					}
					
				} else {
					uni.navigateBack()
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
    @function torem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
	.head-bar {
		// height: 80rpx;
		width: 100%;
		margin-bottom: 10rpx;
		display: flex;
		align-items: flex-end;
		font-size: 12px;
		padding-left: 20rpx;
		z-index: 9999;
		color: #ffffff;
	}
	.fiexd {
		position: fixed;
		top: 0;
	}
	.status_bar {
	    height: var(--status-bar-height);
	    width: 100%;
	}
	.home {
		// background-color: #CCCCCC;	
		// height: 32px;
		// width: 32px;
		// border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}  
	.title {
		// padding-left: 10rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: torem(34);
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		// width: 150px;
	}
	.ios-title {
		left: 50%;
		transform: translateX(-50%);
	}
	.android-title {
		left: 80rpx;
		transform: translateX(0%);
	}
	.iconfont {
		font-size: 48rpx;
		font-weight: bold;
	}
</style>